<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>两种写法</title>
    <!-- 引入VUE -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 
        data与el的2种写法
        1.el有2中写法
            (1).new Vue时候配置el属性
            (2).先创建Vue实例vm, 随后在通过 vm.$mount('#root')指定el的值
        2.data有2种写法
            (1).对象式
            (2).函数式
            如何选择: 目前那种写法都可以, 以后学习到组件时, data必须使用函数式, 否则会报错
            3.一个重要的原则:
                有Vue还礼的函数, 一定不要写箭头函数, 一旦写了箭头函数, this就不再是Vue实例了
     -->


    <div id="root">
        <h1>你好，{{name}}</h1>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false
    // el 的两种写法
    const v = new Vue({
        // el: '#root', // el第一种写法
        // data 的第一种写法:对象式
        // data: { 
        //     name: 'LL',
        //     name1: 'CC'
        // }

        // data的第二种写法 函数式
        /*
        data:function(){
            console.log('@@@', this);
        return{
            name:'cc'
        }
    }*/
        data(){
            return{
                name:'dd'
            }
        }
    })
    console.log(v);
    // v.$mount('#root')
    // 定时器
    setTimeout(() => {
        v.$mount('#root') // el第二种写法
    }, 500);

    

</script>
</html>